<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>用户中心</title>
<jsp:include page="../../cite.jsp" />
<link rel="stylesheet" href="${_path}/theme/theme-menu.css">
<link rel="stylesheet" href="${_path}/lib/datetimepicker/css/datetimepicker.min.css">
<script src="${_path}/lib/bootbox-4.4.0/bootbox.min.js"></script>
<script src="${_path}/lib/datetimepicker/js/datetimepicker.min.js"></script>
<script src="${_path}/lib/datetimepicker/js/locales/datetimepicker.zh-CN.js"></script>
<style>
.body {
	padding-top: 40px;
}

.body .btn-group>.active {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}

.body .panel>.panel-body {
	padding-top: 30px;
}

.body .input-date>input {
	cursor: pointer;
	background-color: #fff !important;
}

.body .alert {
	margin: 10px 10px 0 10px;
}
</style>
</head>
<body>
	<jsp:include page="../../header.jsp" />
	<jsp:include page="./user-menu.jsp?active=info" />
	<div class="body">
		<div class="panel panel-default">
			<c:if test="${succ == true}">
				<div class="alert alert-success alert-dismissible fade in" id="alert">修改成功</div>
			</c:if>
			<div class="panel-body">
				<f:form class="form-horizontal" method="post" modelAttribute="userDetailParam" id="form">
					<div class="form-group form-group-sm row">
						<label class="col-sm-2 control-label" for="name">姓名</label>
						<div class="col-sm-8">
							<f:input path="name" class="form-control" placeholder="姓名" />
							<f:errors path="name" class="text-danger" />
						</div>
					</div>
					<div class="form-group form-group-sm row">
						<label class="col-sm-2 control-label" for="birthday">出生</label>
						<div class="col-sm-8">
							<div class="input-group input-group-sm input-date">
								<f:input path="birthday" class="form-control" placeholder="出生日期，例如：1988-03-29" readonly="true" autocomplete="off" />
								<span class="input-group-btn">
									<a href="javascript:;" class="btn btn-default">
										<i class="fa fa-close"></i>
									</a>
								</span>
							</div>
							<f:errors path="birthday" class="text-danger" />
						</div>
					</div>
					<div class="form-group form-group-sm row">
						<label class="col-sm-2 control-label" for="sex">性别</label>
						<div class="col-sm-8">
							<div class="btn-group btn-group-sm input-select" data-toggle="buttons">
								<c:forEach var="sex" items="${sexs}">
									<label class="btn btn-default ${userDetailParam.sex == sex.key ? 'active' : ''}">
										<input type="radio" name="sex" value="${sex.key}" ${userDetailParam.sex == sex.key ? 'checked' : ''}>
										${sex.value}
									</label>
								</c:forEach>
								<a href="javascript:;" class="btn btn-default">
									<i class="fa fa-close"></i>
								</a>
							</div>
							<f:errors path="sex" class="text-danger" />
						</div>
					</div>
					<hr>
					<div class="form-group row">
						<div class="col-sm-offset-2 col-sm-8">
							<a href="./" class="btn btn-link btn-sm">重 置</a>
							<button type="submit" class="btn btn-primary btn-sm" data-loading-text="提交中...">修 改</button>
							<f:errors class="text-danger" />
						</div>
					</div>
				</f:form>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			bootbox.setLocale('zh_CN');
			$('#form .input-date>input').datetimepicker({
				format : 'yyyy-mm-dd',
				initialDate : '1990-01-01',
				autoclose : true,
				language : 'zh-CN',
				minView : 2
			});
			$('#form .input-date>span>a.btn').bind('click', function() {
				$(this).parent().parent().children('input').val('');
			});
			$('#form .input-select>a.btn').bind('click', function() {
				$(this).parent().children('label.btn').each(function(i, n) {
					$(n).removeClass('active').children().prop('checked', false);
				});
			});
			$('#form').submit(function() {
				$('#form button[data-loading-text]').button('loading');
				return true;
			});
			if ($('#alert').length != 0)
				setTimeout(function() {
					$('#alert').alert('close');
				}, 1500);
		});
	</script>
</body>
</html>